// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { StyleSheet, Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { goodsList } from './module/module.js'
import { requestPlateList, requestPlateHotList, plateFollow } from '../../module/module'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, RnFlatList, RefreshScrollView, CacheImage } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, pathHead, hotTextColor, requestPlateFollow, borderTop, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class Guest extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      searchBackgroundColor: '#ccc',
      loading: false,
      dataList: {
        total: 0,
        size: 10,
        current: 1,
        pages: 1,
        records: []
      }
    }
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      // ...耗时较长的同步的任务...
      this.showLoadingData()
    });
  }

  showLoadingData(options) {
    this.loading = Toast.loading('加载中', 0)
    this.loadingData(options).then(res => {
      Portal.remove(this.loading)
    }).catch(error => {
      Portal.remove(this.loading)
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  loadingData(options) {
    return Promise.all([requestPlateList(options), requestPlateHotList(options)])
  }

  handlePlateFollow(options) {
    requestPlateFollow(options).then(res => {
      this.showLoadingData()
    })
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    this.loadingData().then(res => {
      this.setState({
        refreshing: false
      })
    }).catch(error => {
      this.setState({
        refreshing: false
      })
    })
  }


  renderPlateHotList() {
    const { plateHotList, dispatch } = this.props
    console.log(plateHotList)
    let width = 180
    return plateHotList.map((item, index) => {
      return (
        <View
          key={index}
          style={{
            overflow: 'hidden',
            backgroundColor: hotTextColor,
            zIndex: 0,
            padding: 15,
            marginBottom: 15,
            width: width,
            borderRadius: 10,
            overflow: 'hidden',
            marginRight: 15
          }}
        >
          <TouchableOpacity
            style={{
              flex: 1
            }}
            onPress={() => {
              Actions.plateDetail({ id: item.id })
            }}
          >
            <View style={{
              alignItems: 'center',
              marginTop: 8,
              marginBottom: 8,
              paddingLeft: 0,
            }}>
              <CacheImage
                resizeMod={"contain"}
                style={{
                  width: width / 2,
                  height: width / 2,
                  borderRadius: width / 2 / 2,
                  overflow: 'hidden'
                }}
                source={{ uri: `${pathHead}${item.icon}` }}

              />
              <Text style={{ fontSize: 16, color: '#000', lineHeight: 18, marginTop: 10}}>{item.name}</Text>
            </View>
            <View
              style={{
                marginBottom: 8,
              }}
            >
              <Text style={{ fontSize: 14, color: '#fff', textAlign: 'center' }}>
                {item.desc || '暂无简介'}
              </Text>
            </View>
            <View style={{
              marginTop: 10,
              paddingTop: 10,
              flexDirection: 'row',
              alignItems: 'center',
              ...borderTop({
                color: '#fff'
              })
            }}>
              <View style={{
                flex: 1,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>关注</Text>
                <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>{item.followCount}</Text>
              </View>
            </View>
            <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 15 }}>
              {item.follow ? (
                <TouchableOpacity
                  style={{
                    paddingVertical: 5,
                    paddingHorizontal: 15,
                    borderRadius: 5,
                    backgroundColor: '#000'
                  }}
                  onPress={() => {
                    this.handlePlateFollow({ id: item.id, type: 0 })
                  }}
                >
                  <Text style={{ fontSize: 16, color: '#fff', lineHeight: 18, }}>取消关注</Text>
                </TouchableOpacity>
              ) : (
                  <TouchableOpacity
                    style={{
                      paddingVertical: 5,
                      paddingHorizontal: 15,
                      borderRadius: 5,
                      backgroundColor: '#000'
                    }}
                    onPress={() => {
                      this.handlePlateFollow({ id: item.id, type: 1 })
                    }}
                  >
                    <Text style={{ fontSize: 16, color: '#fff', lineHeight: 18, }}>关注</Text>
                  </TouchableOpacity>
                )}
            </View>
          </TouchableOpacity>
        </View>
      )
    })
  }

  renderPlateList() {
    const { plateList, dispatch } = this.props
    return plateList.map((item, index) => {
      return (
        <View
          key={index}
          style={{
            overflow: 'hidden',
            backgroundColor: '#fff',
            zIndex: 0,
            borderRadius: 10,
            overflow: 'hidden',
            marginBottom: 15
          }}
        >
          <TouchableOpacity
            style={{
              flex: 1,
              padding: 15,
            }}
            onPress={() => {
              Actions.plateDetail({ id: item.id })
            }}
          >
            <View style={{
              alignItems: 'center',
              flexDirection: 'row',
              marginBottom: 8,
              paddingLeft: 0,
            }}>
              <CacheImage
                resizeMod={"contain"}
                style={{
                  marginRight: 5,
                  width: 50,
                  height: 50,
                  borderRadius: 25,
                  overflow: 'hidden'
                }}
                source={{ uri: `${pathHead}${item.icon}` }}
              />
              <View style={{ flex: 1 }}>
                <View style={{ flexDirection: 'row', alignItems: 'center',  }}>
                  <Text style={{ fontSize: 16, color: '#000', lineHeight: 18, }}>{item.name}</Text>
                  <View style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginLeft: 10
                  }}>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>关注</Text>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>{item.followCount}</Text>
                  </View>
                </View>
                <View
                  style={{
                    marginTop: 8
                  }}
                >
                  <Text style={{ fontSize: 14, color: '#61676F', }}>
                    {item.desc || '暂无简介'}
                  </Text>
                </View>
              </View>
              {item.follow ? (
                <TouchableOpacity
                  style={{
                    paddingVertical: 5,
                    paddingHorizontal: 15,
                    borderRadius: 5,
                    backgroundColor: '#000'
                  }}
                  onPress={() => {
                    this.handlePlateFollow({ id: item.id, type: 0 })
                  }}
                >
                  <Text style={{ fontSize: 16, color: '#fff', lineHeight: 18, }}>取消关注</Text>
                </TouchableOpacity>
              ) : (
                  <TouchableOpacity
                    style={{
                      paddingVertical: 5,
                      paddingHorizontal: 15,
                      borderRadius: 5,
                      backgroundColor: '#000'
                    }}
                    onPress={() => {
                      this.handlePlateFollow({ id: item.id, type: 1 })
                    }}
                  >
                    <Text style={{ fontSize: 16, color: '#fff', lineHeight: 18, }}>关注</Text>
                  </TouchableOpacity>
                )}
            </View>
          </TouchableOpacity>
          <View style={{}}>
            {item.childList.map((itemChildren, indexChildren) => {
              return (
                <View style={{ backgroundColor: '#FAFAFA', }} key={indexChildren}>
                  <TouchableOpacity
                    style={{
                      padding: 15
                    }}
                    onPress={() => {
                      Actions.plateDetail({ id: itemChildren.id })
                    }}
                  >
                    <View style={{
                      alignItems: 'center',
                      flexDirection: 'row',
                      marginBottom: 8,
                      paddingLeft: 0,
                    }}>
                      <CacheImage
                        resizeMod={"contain"}
                        style={{
                          marginRight: 5,
                          width: 50,
                          height: 50,
                          borderRadius: 25,
                          overflow: 'hidden'
                        }}
                        source={{ uri: `${pathHead}${itemChildren.icon}` }}
                      />
                      <View style={{ flex: 1 }}>
                        <View style={{ flexDirection: 'row', alignItems: 'center', }}>
                          <Text style={{ fontSize: 16, color: '#000', lineHeight: 18, }}>{itemChildren.name}</Text>
                          <View style={{
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'center',
                            marginLeft: 10
                          }}>
                            <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>关注</Text>
                            <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>{itemChildren.followCount}</Text>
                          </View>
                        </View>
                        <View
                          style={{
                            marginTop: 8
                          }}
                        >
                          <Text style={{ fontSize: 14, color: '#61676F', }}>
                            {itemChildren.desc || '暂无简介'}
                          </Text>
                        </View>
                      </View>
                      {itemChildren.follow ? (
                        <TouchableOpacity
                          style={{
                            paddingVertical: 5,
                            paddingHorizontal: 15,
                            borderRadius: 5,
                            backgroundColor: '#000'
                          }}
                          onPress={() => {
                            this.handlePlateFollow({ id: itemChildren.id, type: 0 })
                          }}
                        >
                          <Text style={{ fontSize: 16, color: '#fff', lineHeight: 18, }}>取消关注</Text>
                        </TouchableOpacity>
                      ) : (
                          <TouchableOpacity
                            style={{
                              paddingVertical: 5,
                              paddingHorizontal: 15,
                              borderRadius: 5,
                              backgroundColor: '#000'
                            }}
                            onPress={() => {
                              this.handlePlateFollow({ id: itemChildren.id, type: 1 })
                            }}
                          >
                            <Text style={{ fontSize: 16, color: '#fff', lineHeight: 18, }}>关注</Text>
                          </TouchableOpacity>
                        )}
                    </View>
                  </TouchableOpacity>
                </View>
              )
            })}
          </View>
        </View>
      )
    })
  }

  render() {
    const { refreshing } = this.state
    const { guestGoodsList } = this.props
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title="圈子"
          extra="发布帖子"
          extraOnPress={() => {
            Actions.postCard()
          }}
        />
        <RefreshScrollView
          style={Style.content}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
        >
          <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginTop: 10, marginBottom: 10, paddingHorizontal: 15 }}>热门板块</Text>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false}>
            <View style={{ width: 15 }}></View>
            <View style={{ flexDirection: 'row', alignItems: 'flex-start', }}>
              {this.renderPlateHotList()}
            </View>
          </ScrollView>
          <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginTop: 10, marginBottom: 10, paddingHorizontal: 15 }}>全部板块</Text>
          <View style={{ paddingHorizontal: 15, borderRadius: 5 }}>
            {this.renderPlateList()}
          </View>
        </RefreshScrollView>
      </View >
    );
  }
}



export default connect(({ guestGoodsList, plateList, plateHotList }) => ({
  guestGoodsList, plateList, plateHotList
}))(pureRender(Guest))
